<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>双向绑定</title>
    </head>
    <body>

        <h4>手动实现双向绑定</h4>

        <div class="wrapper">
            <input type="text" oninput="x.read(this)">
            <div class="result"></div>
        </div>

        <script type="text/javascript">

            const input = document.querySelector( '.wrapper input' );
            const result = document.querySelector( '.wrapper .result' );

            const u = Object.create( null );

            Object.defineProperty( u , 'nickname' , { 
                get(){
                    console.log( 'getter' );
                    return this._nickname ;
                },
                set( value ){
                    console.log( 'setter' );
                    this._nickname = value ;
                    input.value = this._nickname ;
                    result.innerHTML = this._nickname ;
                }
            });

            const x = {
                read( e ) {
                    // 对于 input 和 textarea 来说可以通过 value 获得用户输入的内容
                    console.log( e.value );
                    u.nickname = e.value ;
                }
            }
        </script>
        
    </body>
</html>